<template>
  <div class="swiperbox">
    <div class="bgimg">
      <img
        ref="bgimg"
        :src="data.imageUrl"
        alt=""
        class="backimg"
        v-for="(data, index) in imglist"
        :key="index"
      />
      <div class="qqq">
        <div class="swiperbox1">
          <div class="swiperbox1_1">
            <div class="swiper">
              <img
                ref="img"
                class="swiperimg"
                :src="data.imageUrl"
                alt=""
                v-for="(data, index) in imglist"
                :key="index"
              />
            </div>
            <div class="download"></div>
          </div>
          <p class="leftbtn pbtn" @click="leftbtn"></p>
          <p class="rightbtn pbtn" @click="rightbtn"></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 储存轮播图数组
      imglist: [],
      // 设置定时器
      t: null,
      // 轮播图片的索引
      imgindex: 0,
      // 储存轮播图索引
      num: 0
    }
  },
  mounted () {
    // 初始化
    this.init()
  },
  methods: {
    // 初始化  把axios改为同步执行,不然会未获取图片就进行轮播
    async init () {
      await this.maxaxios.get('/banner').then((res) => {
        // console.log("轮播图", res.banners);
        this.imglist = res.banners
      })
      await this.play()
    },
    // 播放
    play () {
      clearInterval(this.t)
      // ref获取所有需要轮播的图片
      const img = this.$refs.img
      // ref获取所有需要轮播的背景图片
      const bgimg = this.$refs.bgimg
      this.t = setInterval(() => {
        // 当索引值大于总图片长度 让其重头开始
        if (this.imgindex === this.imglist.length) {
          this.imgindex = 0
        }
        // for循环每一条，把所有的图片隐藏(opacity),层级为0(z-index)，
        for (let i = 0; i < img.length; i++) {
          img[i].style.zIndex = 0
          img[i].style.opacity = 0
          bgimg[i].style.opacity = 0
          bgimg[i].style.zIndex = 0
          // 每一条消失的动画为0s
          img[i].style.transition = 'all 0s'
        }
        // 把需要轮播的轮播的图片层级设置为1(z-index=1);
        img[this.imgindex].style.zIndex = 1
        // 吧所需要显示的轮播图设置为显示(opacity=1);
        img[this.imgindex].style.opacity = 1
        bgimg[this.imgindex].style.opacity = 1
        bgimg[this.imgindex].style.zIndex = 1
        // 先把当前轮播的图片索引值存起来，用于下一页上一页的点击
        this.num = this.imgindex
        // 开启本轮播图的动画
        img[this.imgindex].style.transition = 'all 3s'
        // 索引值++
        this.imgindex++
      }, 3000)
    },
    // 下一张
    rightbtn () {
      const img = this.$refs.img
      const bgimg = this.$refs.bgimg
      // 循环把所有图片的层级跟opac设置为0，取消动画效果
      for (let i = 0; i < img.length; i++) {
        img[i].style.zIndex = 0
        img[i].style.opacity = 0
        bgimg[i].style.opacity = 0
        bgimg[i].style.zIndex = 0
        img[i].style.transition = 'all 0s'
      }
      // 下一张=当前图片的index值+1
      this.num++
      if (this.num === img.length) {
        this.num = 0
      }
      this.imgindex = this.num
      img[this.imgindex].style.zIndex = 1
      img[this.imgindex].style.opacity = 1
      bgimg[this.imgindex].style.opacity = 1
      bgimg[this.imgindex].style.zIndex = 1
      img[this.imgindex].style.transition = 'all 3s'
    },
    leftbtn () {
      const img = this.$refs.img
      const bgimg = this.$refs.bgimg
      // 循环把所有图片的层级跟opac设置为0，取消动画效果
      for (let i = 0; i < img.length; i++) {
        img[i].style.zIndex = 0
        img[i].style.opacity = 0
        bgimg[i].style.opacity = 0
        bgimg[i].style.zIndex = 0
        img[i].style.transition = 'all 0s'
      }
      // 下一张=当前图片的index值+1
      this.num--
      if (this.num < 0) {
        this.num = this.imglist.length - 1
      }
      this.imgindex = this.num
      img[this.imgindex].style.zIndex = 1
      img[this.imgindex].style.opacity = 1
      bgimg[this.imgindex].style.opacity = 1
      bgimg[this.imgindex].style.zIndex = 1
      img[this.imgindex].style.transition = 'all 3s'
    }
  },
  destroyed () {
    clearInterval(this.t)
  }
}
</script>

<style scoped>
.swiperbox {
  width: 100%;
  height: 280px;
}
/* 背景图外层 */
.bgimg {
  width: 100%;
  height: 100%;
  background-color: none;
  position: relative;
  overflow: hidden;
}
/* 背景图片 */
.backimg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  filter: blur(10px);
  transform: scale(3);
  transition: all 3s;
}
.backimg:nth-child(1) {
  z-index: 1;
}
/* 轮播图外层 */
.qqq {
  width: 1000px;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  position: absolute;
  z-index: 2;
}
.swiperbox1 {
  width: 100%;
  height: 100%;
  margin: auto;
  position: relative;
}
.swiperbox1_1 {
  width: 100%;
  height: 100%;
}
.swiperbox1_1::after {
  content: "";
  clear: both;
  display: block;
}
.swiper {
  width: 75%;
  height: 100%;
  float: left;
  position: relative;
}
.swiperimg {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: all 3s;
}
.swiperimg:nth-child(1) {
  z-index: 1;
}
.download {
  width: 25%;
  height: 100%;
  /* background-color: rgb(209, 49, 108); */
  float: right;
  background-image: url(../../../public/img/download.png);
  background-repeat: no-repeat;
  background-size: 100% 124%;
}
.pbtn {
  width: 37px;
  height: 63px;
  position: absolute;
  top: 39%;
  cursor: pointer;
}
.pbtn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.leftbtn {
  left: -60px;
  background-image: url(../../../public/img/banner.png);
  background-repeat: no-repeat;
  background-position: 0 -360px;
}
.rightbtn {
  right: -60px;
  background-image: url(../../../public/img/banner.png);
  background-repeat: no-repeat;
  background-position: 0 -508px;
}
</style>
